<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">类型</label>
            <div class="col-sm-10 typeRadio">
              	<label class="radio-inline">
				<input type="radio" name="typeId" value="1" checked> 菜单 </label>
				<label class="radio-inline">
				<input type="radio" name="typeId" value="2"> 按钮 </label>
            </div>
          </div>
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
            <div class="col-sm-10">
              <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
            </div>
          </div>
          <div class="form-group">
            <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="urlId" placeholder="url">
            </div>
          </div>
          <div class="form-group">
			<label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
			<div class="col-sm-10">
				<input type="text" id="permissionId"
				       placeholder="多个用逗号分隔，如：user:list,user:create"
					   class="form-control">
			</div>
		  </div>
		  <div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号：</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号"
						class="form-control">
				</div>
		 </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
      <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
		<div class="layui-layer-title" style="cursor: move;">选择菜单</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a>
			<a class="layui-layer-btn1 btn-cancel">取消</a>
	     </div>
      </div>
      
  </div>
  <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
  <script type="text/javascript" src="bower_components/layer/layer.js">
  </script>
 <script type="text/javascript">
  var zTree; 
  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象
  $(function(){
//（给form【根据标签选择】下的.load-sys-menu【根据类选择,该标签是一个文本输入框】注册一个点击事件，
//该点击事件会触发一个弹窗（这个弹窗是点击添加按钮出来的窗口上，再点击load-sys-menu出来的窗口），弹窗里面会出现菜单列表）
	  $("form").on("click",".load-sys-menu",doLoadZtreeNodes)
	  //该点击事件，是触发doCance操作，要求点击取消按键后会关闭当前窗口（当前窗口是点击添加后出来的那个窗口），并跳转刷新页面（menu/doMenuListUI.do）。
	  .on("click",".btn-cancel",doCancel)
	  //该电机事件，是触发保存或者更新操作，要求点击保存按钮后，会关闭当前弹窗，并且会把当前窗口的数据信息保存下来，并发送给数据库进行保存或者更新操作。
	  .on("click",".btn-save",doSaveOrUpdate)
	  
	  //menuLayer是隐藏div的id，这个是点击隐藏div上面的取消按钮会触发一个隐藏（doHideTree）动作，把menuLayer的div设置为隐藏。
	  $("#menuLayer").on("click",".btn-cancel",doHideTree)
	  //点击隐藏div的确认按钮，执行doSetSelectNode方法，该方法会把选中的菜单，通过data方法存入到属性id中
	  .on("click",".btn-confirm",doSetSelectNode)
	  
	  //获取div容器上绑定的数据
	  var rowData=$("#mainContentId").data("rowData")
	  if(rowData)doInitEditForm(rowData)
  })
  //通过数据初始化页面表单内容
  function doInitEditForm(rowData){
	  $("input[value='"+rowData.type+"']").prop('checked',true)
		$("#nameId").val(rowData.name)
		$("#parentId").data("id",rowData.parentId)
		$("#parentId").val(rowData.parentName)
		$("#urlId").val(rowData.url)
		$("#permissionId").val(rowData.permission)
		$("#sortId").val(rowData.sort)
	  }
  //该函数用来执行点击取消按钮的操作。
  function doCancel(){
	  //点击取消按钮后，会跳转到urlmenu/doMenuListUI.do，这样会重新刷新当前页面
	  var url="menu/doMenuListUI.do";
	  $("#mainContentId").load(url,function(){
		  $("#mainContentId").removeData();
	  });//重新加载该url，mainContentId这个标签上面绑定了一个load事件，。
  }
  //把窗口填入的信息保存下来，发送给数据库
  function doSaveOrUpdate(){
	  //获取表单数据
	  /*ajax请求的，客户端要根据实际情况是否给服务端传递数据，如果传递的话，就有参数，如果没有传参，就不要有参数，
	  该方法来获取参数。
	  */
	  var params=doGetEditFormData();
	  var rowData=$("#mainContentId").data("rowData")
	  if(rowData)params.id=rowData.id;
	  var insertUrl="menu/doSaveObject.do";
	  var updateUrl="menu/doUpdateObject.do"
	  //异步提交表单数据
	 	var url=rowData?updateUrl:insertUrl;
	  $.post(url,params,function(result){
		  if(result.state==1){
			  alert(result.message);
			  doCancel();
		  }else{
			  alert(result.message)
		  }
	  })
  }
  function doGetEditFormData(){
	  /*
	  需要传参给数据库，这里面除了id参数，其他都是从添加窗口获取的，id是
	  */
	  var params={
	type:$("input[type='radio']:checked").val(),
	name:$("#nameId").val(),
	parentId:$("#parentId").data("id"),
	url:$("#urlId").val(),
	permission:$("#permissionId").val(),
	sort:$("#sortId").val()
	  }
	return params;	  
  }
  function doHideTree(){
	  $("#menuLayer").css("display","none");
  }
  function doSetSelectNode(){
	  //获得选中节点
	  var nodes=zTree.getSelectedNodes();
//返回的是一个nodes数组，里面封装的应该是，Nodes类型对象，应该可以这么写（Nodes[] nodes={nodes[0],nodes[1]....}）
//但我们这里是单选框所以只用选中第一个即nodes[0]，然后找nodes[0]里面封装的属性。
	  console.log("im coming")
	  console.log(nodes);//这个nodes里面封装了很多信息，包括id和name，parentId，比我们自定义的node类里面的属性要多。
	  if(nodes.length==0){
		  alert("请先选择节点")
		  return;
	  }
	  console.log(nodes[0]);
	  //通过节点数据更新页面
	  $("#parentId").val(nodes[0].name)//给输入框中的文本内容赋值，
	  $("#parentId").data("id",nodes[0].id);
	 // 隐藏ztree对象
	  doHideTree();
  }
  //点击文本框触发的事件，
  function doLoadZtreeNodes(){
	  
	  //显示div，该div默认是隐藏的，点击之后更改为显示
	  $("#menuLayer").css("display","block");
	  //异步加载数据并初始化，并初始化数据zTree，
	 var url="menu/doFindZtreeMenuNode.do";
	 //jQuery.getJSON(url, [data], [callback])
	 $.getJSON(url,function(result){
		 /*数据初始化完成后，执行回调函数。这里的初始化数据是指通过访问url：menu/doFindZtreeMenuNode.do，返回结果是一个List<Node>,
		 再把这个结果List<Node>封装到jsonresult里面（通过 new JsonResult(List<Node>),这里其实是把Node信息存放在了jsonresult对象的data属性里面，客户端取数据的时候通过
		 result.data就可以取到服务端封装在Node里面的数据）
		 返回给客户端，客户端把jsonresult里面封装的信息都传递给了result，result把这些信息也封装了下。
		 */
		 if(result.state==1){
			 /*这里，又通过result，把result里面封装的信息result.data，传递给对象$("#menuTree")，$.fn.zTree.init($("#menuTree"),setting,result.data)
			 这个方法是zTree插件里面的方法，执行该方法后会根据result.data传递过来的数据，生成一个下拉菜单。
		*/
			 zTree=$.fn.zTree.init($("#menuTree"),setting,result.data)
			 //这里的data其实就是上面说到的Node信息，Node信息也就是result.data，然后把这些数据又给了"#menuTree"。
			 
		 }else{
			 alert(result.message)
		 }
	 })
  }
  
  
  </script>
    
    
    
    
    
    
    
    
    